<% options_param_name ||= :options %>
<% if product.has_variants? %>
  <div id='product-variant-picker' class="flex flex-col gap-y-4 mb-4 mt-2">
    <% product.option_types.each_with_index do |option_type, index| %>
      <% selected_option = product_selected_option_for_option(option_type, product: product, selected_variant: selected_variant, options_param_name: options_param_name) %>
      <% if option_type.color? %>
        <%= option_type_colors_preview_styles(option_type).html_safe %>
        <fieldset data-option-id="<%= option_type.id %>" class="flex flex-col gap-y-2">
          <span class="text-sm leading-4 uppercase tracking-widest"><%= option_type.presentation %>: <%= selected_option.presentation %></span>
          <ul class="flex items-center flex-wrap gap-1">
            <%= render 'spree/products/variant_options', product: product, option_type: option_type, position: index, selected_variant: selected_variant, options_param_name: options_param_name %>
          </ul>
        </fieldset>
      <% else %>
        <fieldset data-option-id="<%= option_type.id %>">
          <div data-controller="dropdown" class="relative mb-2">
            <div class="flex items-center justify-between">
              <button
                data-action="click->dropdown#toggle click@window->dropdown#hide"
                type='button'
                class='text-sm uppercase tracking-widest flex gap-2 items-center border border-default py-2 px-4 rounded-input dropdown-button'
                data-dropdown-target="button">
                <legend class="mr-2" id="option-<%= option_type.id %>-value">
                  <% if selected_option %>
                    <%= option_type.presentation %>: <span class="option-value-text"><%= selected_option.presentation %></span>
                  <% else %>
                    <%= Spree.t('storefront.variant_picker.please_choose', option_type: option_type.presentation) %>
                  <% end %>
                </legend>
                <% render 'spree/shared/icons/chevron_down' %>
              </button>
            </div>
            <div data-dropdown-target="menu"
                data-transition-enter="transition ease-out"
                data-transition-enter-from="opacity-0 translate-y-1"
                data-transition-enter-to="opacity-100 translate-y-0"
                data-transition-leave="transition ease-in"
                data-transition-leave-from="opacity-100 translate-y-0"
                data-transition-leave-to="opacity-0 translate-y-1"
                class="hidden absolute top-11 left-0 z-[9999] flex w-screen max-w-max shadow-xs">
              <div class="bg-background border-default border overflow-hidden w-72">
                <%= render 'spree/products/variant_options', product: product, option_type: option_type, position: index, selected_variant: selected_variant, options_param_name: options_param_name %>
              </div>
            </div>
          </div>
        </fieldset>
      <% end %>
    <% end %>
  </div>
<% end %>
